<template>
  <view class="container">
    <!-- 头部区域 -->
    <view class="head" style="background-color: #ffcc00; height: 180rpx; display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 999;">
      <img 
        style="height: 50rpx; width: 50rpx; padding: 10rpx; margin-top: 15%;"  
        src="../../../static/tabbar/返回.png" 
        alt="" 
        @click="handleBack"
      />
      <view style="height: fit-content; margin-top: 15%; margin-left: 25%; font-size: 32rpx;">
        我的所有预约
      </view>
    </view>

    <scroll-view class="content" scroll-y="true" style="margin-top: 180rpx;">
      <view v-if="appointments.length > 0">
        <view class="appointment-item" v-for="(item, index) in appointments" :key="index">
          <text class="service-name">{{ item.serviceName }}</text>
          <view class="date-time">
            <text class="date">{{ item.appointmentStartDate }} 至 {{ item.appointmentEndDate }}</text>
            <text class="time">{{ item.startTime }} - {{ item.endTime }}</text>
          </view>
          <!-- <text class="status" :class="getStatusClass(item.status)">{{ formatStatus(item.status) }}</text> -->
        </view>
      </view>
      <view v-else class="no-appointment-tip">
        <text>暂无预约记录</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const appointments = ref([]);

onMounted(() => {
  const allAppointments = uni.getStorageSync('allAppointments');
  if (allAppointments) {
    appointments.value = JSON.parse(allAppointments);
  }
});

const handleBack = () => {
  uni.navigateBack();
};

const formatStatus = (status) => {
  const statusMap = {
    'PENDING_SETTLE': '待结算',
    // 可以根据需要添加其他状态映射
  };
  return statusMap[status] || status;
};

const getStatusClass = (status) => {
  return {
    'status-pending': status === 'PENDING_SETTLE',
    // 可以根据需要添加其他状态样式
  };
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.content {
  height: calc(100vh - 200rpx);
}

.appointment-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.service-name {
  font-size: 36rpx;
  color: #333;
  display: block;
  font-weight: bold;
}

.date-time {
  margin-top: 10rpx;
}

.date, .time {
  font-size: 30rpx;
  color: #666;
  margin-right: 20rpx;
}

.status {
  font-size: 24rpx;
  float: right;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
}

.status-pending {
  color: #ff9800;
  background-color: #fff3e0;
}

.no-appointment-tip {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 36rpx;
}
</style>